<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            background: red;
        }

        .sad {
            width: 400px;
            height: 100px;
            border: 1px solid grey;
            background: grey;
        }

        .normal {
            width: 400px;
            height: 100px;
            border: 1px solid blue;
            background: blue;
        }

        .zhouwei1 {
            width: 400px;
            height: 100px;
            border: 1px solid pink;
            background: pink;
        }

        .zhouwei2 {
            width: 400px;
            height: 100px;
            border: 1px solid #f9ff1d;
            background: #f9ff1d;
        }

        .zhouwei3 {
            width: 400px;
            height: 100px;
            border: 1px solid #beffa9;
            background: #beffa9;
        }
    </style>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--绑定class样式-字符串写法，适用于：样式的类名不确定，需要动态指定-->
    <div class="basic" v-bind:class="mood" @click="changeMood"> {{name}}</div>
    <br>
    <br>
    <!--绑定class样式-数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
    <div class="basic" v-bind:class="arr" @click="changeMood"> {{name}}</div>
    <br>
    <br>
    <!--绑定class样式-对象写法，适用于：要绑定的样式个数确定，名字也确定，要动态决定要不要-->
    <div class="basic" v-bind:class="classObj" @click="changeMood"> {{name}}</div>
    <br>
    <br>
    <div class="basic" v-bind:style="styleObj" @click="changeMood"> {{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: "#root",
        data: {
            name: "新讯",
            mood: "normal",
            arr: ["zhouwei1", "zhouwei2", "zhouwei3"],
            classObj: {
                zhouwei1: false,
                zhouwei2: false
            },
            styleObj: {
                fontSize: "40px"
            }
        },
        methods: {
            changeMood() {
                const arr = ["happy", "sad", "normal"]
                this.mood = arr[Math.floor(Math.random() * 3)]
            }
        }
    })
</script>

</body>
</html>